.flexs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header {
    width: 100vw;
    height: 58px;
    background-color: rgba(36,170,227, .9);
    color: #fff;
    padding: 0 30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    @extend .flexs;
    .logo {
        font: 24px bold;
        cursor: pointer;
        &:hover {
            text-shadow: pink 0 0 2px;
        }
    }
    .search {
        padding: 2px 10px;
        input {
            width: 200px;
            height: 36px;
            padding: 0 12px;
            line-height: 36px;
            background-color: rgba(255, 255, 255, .3);
            border: 1px solid rgba(255, 255, 255, .3);
            border-radius: 2px;
            transition: all .3s;
            &:focus {
                width: 360px;
                box-shadow: rgba(255, 255, 255, .3) 0 0 2px 2px;
            }
        }
    }
    .bar {
        display: flex;
        align-items: center;
        @extend .flexs;
        li {
            padding: 0 10px;
            a {
                font-size: 14px;
                &:hover {
                    text-shadow: pink 0 0 2px;
                }
            }
        }
    }
}